<template>
    <div class="class_branch">
        <div class="class_btn_box">
            <div @click="addTalbeFun">添加</div>
            <Btn_box />

        </div>
        <div class="class_branch_top">
            <SlotQuadrangle>
                <template v-slot:com>
                    <TableBranch @errorFun="errorFun" :tableList="getTableList" @EmitItemFun="EmitItemFun"
                        @delItemFun="delItemFun" />
                </template>
            </SlotQuadrangle>

        </div>
        <pageChild :total="total" :pageSize="pageSize" :current="current" @currentChange="currentChange" />
        <div class="class_branch_button"></div>
        <div class="class_add_box" v-show="MyAddIsbool">
            <AddSlotQuadrangle>
                <template v-slot:com>
                    <div class="listzzc_2">
                        <div class="listzzc_3">
                            <AddOrEditBranch @errorFun="errorFun" @MyCancelFun="MyCancelFun" :AddValueEmit="AddValueEmit"
                                @AddFun="AddFun" />
                        </div>
                    </div>

                </template>
            </AddSlotQuadrangle>
        </div>

        <div class="lod" v-show="elIconWarningBool">
            <lodFile :doScTitle="doScTitle" />
        </div>

    </div>
</template>
<script>
// 封装组件
import SlotQuadrangle from '@/components/SslotCom/index.vue'
import AddSlotQuadrangle from '@/components/SslotCom/top_index.vue'
import TableBranch from "./TableBranch/index.vue"
import Btn_box from "@/components/uponelevel/index.vue"
import AddOrEditBranch from "./AddOrEditBranch/index.vue"

//请求接口
import { classOrderTableFunApi } from "@/api/SettingsApi/index.js"
export default {
    // 注册共公组件
    components: {
        SlotQuadrangle,
        TableBranch,
        Btn_box,
        AddOrEditBranch,
        AddSlotQuadrangle,
        pageChild: () => import("@/components/pagination/index.vue"),
        lodFile: () => import("@/components/outfilelod/index.vue"),
    },
    // 定义变量
    data() {
        return {
            elIconWarningBool: false,
            doScTitle: "",
            getTableList: [],
            MyAddIsbool: false,
            AddValueEmit: {},
            item3: "",
            total: 0,
            pageSize: 10,
            current: 1,
        }
    },
    mounted() {
        this.getClassOrderTableFun()
    },
    methods: {
        delItemFun() {
            this.getClassOrderTableFun()
        },
        errorFun(item) {
            this.doScTitle = item.msg;
            this.elIconWarningBool = true
            clearInterval(this.time3)

            this.time3 = setInterval(() => {
                this.elIconWarningBool = false
            }, 3000)
        },
        // 编辑子夫传递
        EmitItemFun(item) {
            this.AddValueEmit = item;
            this.MyAddIsbool = true;

        },
        // 获取班次表格数据
        getClassOrderTableFun() {
            classOrderTableFunApi({
                current: this.current,
                size: this.pageSize,
            }).then(res => {
                if (res.code == 200) {
                    // for (let index = 0; index <= 10; index++) {
                    //     if (res.data.list.length >= 10) {
                    this.getTableList = res.data.list
                    this.total = Number(res.data.total);
                    this.pageSize = res.data.pageSize;
                    this.current = res.data.pageNum;
                    //     } else {
                    //         res.data.list.push({ "title": "1" })
                    //     }

                    // }
                }
            })
        },
        //添加
        addTalbeFun() {
            this.MyAddIsbool = true;
            this.AddValueEmit = {}


        },
        currentChange(current) {
            this.current = current
            this.getClassOrderTableFun()
        },
        //取消弹框
        MyCancelFun() {
            this.MyAddIsbool = false;
        },
        //添加编辑刷新表格
        AddFun() {
            this.MyAddIsbool = false;
            this.getClassOrderTableFun()
        }
    }
}
</script>
<style lang="less" scoped>


.lod {
    position: fixed;
    top: 5%;
    left: 42%;
    z-index: 999;

}

.class_branch {
    width: 98%;
    height: 90%;
    padding: 14px;
    position: relative;

    .class_add_box {
        background: #091123;
        border: 1px solid #113D71;
        width: 452px;
        height: 434px;
        opacity: 0.95;
        position: absolute;
        top: 7%;
        right: 36%;

        .listzzc_2 {
            width: 100%;
            height: 100%;

            background: rgb(3 55 139 / 36%);

            .listzzc_3 {
                width: 100%;
                height: 100%;
                box-shadow: inset 0px 0px 54px 0px #0d3eb8b5;

            }
        }
    }

    .class_btn_box {
        height: 30px;
        position: fixed;
        font-size: 10px;
        top: 8%;
        right: 40px;
        display: flex;
        cursor: pointer;



        div {
            width: 84.38px;
            height: 34.38px;
            background: #031231;
            opacity: 1;
            border: 1px solid #5B9FC3;
            text-align: center;
            line-height: 34.38px;
            color: white;
            margin: 0px 5px;

            .el-button--primary {
                height: 26px !important;
            }
        }

        .divitem {
            position: relative;
            border: 0px solid #5B9FC3;
            height: 40px;
            width: 95px;
            line-height: 40px;

            img {
                width: 100%;
                height: 100%;
            }

            .outbtn {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }

    .class_branch_top {
        height: 100%;
        background: linear-gradient(to right #021130 #010d2a);
        border: 0.44px solid #00479D;
        width: 1665px;
        height: 778px;
        overflow: auto;
    }

    // .class_branch_button {}
}
</style> 